<template lang="pug">
  .tab
    Table(:columns='columns',:data='data',:loading='loading',border)
    .tab-footer
      Page(ref='goto',:total="total",:current="current",:page-size='pageSize',show-elevator,show-total,@on-change='handlePage')
      Button(type='primary',@click='handlePageGo') Go
</template>

<script>
export default {
  name: 'ShowTable',
  props: {
    columns: { type: Array, default: () => [] },
    data: { type: Array, default: () => [] },
    total: { type: Number, default: 0 },
    current: { type: Number, default: 1 }
  },
  data() {
    return {
      pageSize: 10,
      loading: false
    }
  },
  methods: {
    handlePage(pageSub) {
      this.$emit('handleChangePage', pageSub)
    },
    handlePageGo() {
      const isValueNumber = value => /^[1-9][0-9]*$/.test(value + '')
      let val = document.querySelector(".ivu-page-options-elevator>input[type='text']").value.trim()
      const allPages = this.$refs['goto'].allPages
      if (isValueNumber(val)) {
        val = Number(val)
        if (val !== allPages) {
          if (val > allPages) {
            document.querySelector(".ivu-page-options-elevator>input[type='text']").value = allPages
            this.$emit('handleChangePage', allPages)
          } else {
            document.querySelector(".ivu-page-options-elevator>input[type='text']").value = val
            this.$emit('handleChangePage', val)
          }
        } else {
          document.querySelector(".ivu-page-options-elevator>input[type='text']").value = val
          this.$emit('handleChangePage', val)
        }
      } else {
        this.$emit('handleChangePage', 1)
      }
    }
  }
}
</script>

<style lang="scss">
.tab {
  &-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .ivu-page {
      margin-right: 10px;
    }
  }
}
</style>
